<template>
	<view class="page">
		<view class="poster">
			<scroll-view scroll-y="true" class="img_scroll">
				<image :src="canvasImg" mode="widthFix" style="width: 80%; margin: 0 auto;"></image>
			</scroll-view>
		</view>
		
		<view class="color_choose">
			<scroll-view scroll-x="true" class="color_scroll">
				<view class="color_list">
					<view :style="'background-color: ' + item + ';'" v-for="(item, index) in colors" :key="index" @tap="chooseColor" :data-index="index">
						<image :class="choose_index == index ? 'show' : 'hide'" src="/static/img/icon-checked.png" mode=""></image>
					</view>
				</view>
			</scroll-view>
		</view>
		
		<button @tap="save" class="ca-foot" :class="color+'-bg'">保存到手机</button>
	</view>
</template>

<script>
	const app_info = require("@/static/appInfo.js");
	const api_host = app_info.api_host + '/addons/kzvote/'
	import {
		mapGetters
	} from 'vuex';
	export default {
		computed: {
			...mapGetters({
				imgUrl: 'common/cdnurl',
				color: 'common/color',
				color_value: 'common/color_value',
			})
		},
		data() {
			return {
				id: 0,
				canvasImg: '',
				colors: ['#d84a41', '#4f4e54', '#2196f3', '#ff9800', '#9c27b0', '#3f51b5', '#e91e63', '#4caf50'],
				choose_index: 0,
				type: '',
			}
		},
		onLoad: function(options) {
			this.utils.hideShare()
			this.id = options.id;
			this.type = options.type;
			this.poster();
		},
		methods: {
			poster: function() {
				var that = this;
				uni.showToast({
					title: '分享图片生成中...',
					icon: 'loading',
					duration: 1000
				});
				wx.request({
					url: api_host + that.type +'/poster',
					method: 'GET',
					data: {
						id: that.id,
						bg_color: that.colors[that.choose_index],
					},
					header: {
						'content-type': 'application/json',
						'token': that.utils.getData('token'),
					},
					responseType: 'arraybuffer',
					success: function(res) {
						that.hide = false;
						that.canvasImg = 'data:image/png;base64,' + wx.arrayBufferToBase64(res.data);
					},
					fail: (err) => {
						uni.$u.toast('系统异常')
					}
				});
			},
			chooseColor: function(e){
				this.choose_index = e.currentTarget.dataset.index;
				this.poster();
			},
			save() {
				let that = this;
				//若二维码未加载完毕，加个动画提高用户体验
				wx.showToast({
					icon: 'loading',
					title: '正在生成海报',
					duration: 1000
				});
				//判断用户是否授权"保存到相册"
				wx.getSetting({
					success(res) {
						//没有权限，发起授权
						if (!res.authSetting['scope.writePhotosAlbum']) {
							wx.authorize({
								scope: 'scope.writePhotosAlbum',
								success() {
									//用户允许授权，保存图片到相册
									that.savePhoto();
								},
								fail() {
									//用户点击拒绝授权，跳转到设置页，引导用户授权
									wx.openSetting({
										success() {
											wx.authorize({
												scope: 'scope.writePhotosAlbum',
												success() {
													that.savePhoto();
												}
											});
										}
									});
								}
							});
						} else {
							//用户已授权，保存到相册
							that.savePhoto();
						}
					}
				});
			},
			//点击保存图片
			savePhoto() {
				var that = this;
				var aa = wx.getFileSystemManager();
				aa.writeFile({
					filePath: wx.env.USER_DATA_PATH + '/lott_' + that.lott_id + '.png',
					data: that.canvasImg.slice(22),
					encoding: 'base64',
					success: res => {
						wx.saveImageToPhotosAlbum({
							filePath: wx.env.USER_DATA_PATH + '/lott_' + that.lott_id + '.png',
							success: function(res) {
								wx.showToast({
									title: '保存成功'
								});
							},
							fail: function(err) {
								console.log(err);
							}
						});
					},
					fail: err => {
						console.log(err);
					}
				});
			},
		}
	}
</script>

<style>
	.poster {
		width: 100%;
		height: calc(100vh - 165px);
		border-bottom: 1px solid #ccc;
	}
	
	.img_scroll{
		width: 100%;
		height: calc(100vh - 165px);
		margin: 0 auto;
		text-align: center;
	}
	
	.color_choose {
		width: 100%;
	}
	
	.color_list {
		width: 100%;
	}
	
	.color_scroll {
		width: 100%;
		height: 120px;
		white-space: nowrap;
	}
	
	.color_list view {
		width: 50px;
		height: 80px;
		margin: 12px;
		display: inline-block;
		/* float: left; */
	}
	
	.color_list view image {
		width: 20px;
		height: 20px;
		position: relative;
		float: right;
		margin-right: -10px;
	}
	
	.ca-foot {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 32rpx;
		margin-top: 20px;
		border-radius: 0px;
		position: fixed;
		bottom: 0px;
		left: 0px;
		z-index: 9;
	}
</style>
